<template>
	<view class="nav-bar" :style='{"height": navbarHeight}' :class="isHide ? 'hide' : ''">
		<view class="nav-bar-content" :style='{"height": statusBarHeight}'>
			{{navbarHeight + 'px'}}
		</view>
		<view class="nav-header" :style='{"top": statusBarHeight, "height": headerBarHeight}'>
			<view class="header-content">
				<view class="header-but-area left">
					<slot name="left"></slot>
				</view>
				<view class="title">
					<text>{{title}}</text>
				</view>
				<view class="header-but-area right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let applicationInfo = require('../../common/util/applicationInfo.js')
	console.log(applicationInfo)

	export default {
		data() {
			return {
				statusBarHeight: applicationInfo.statusBarHeight + 'px',
				headerBarHeight: applicationInfo.navigationBarHeight + 'px',
				navbarHeight: (applicationInfo.navigationBarHeight + (applicationInfo.statusBarHeight || 0)) + 'px'
			}
		},
		props: ['title', 'isHide']
	}
</script>

<style lang="scss">
	.nav-bar {
		// height: var(--status-bar-height);
		width: 100%;
		background: #FAFAFA;
		transition: background 0.5s;
		position: fixed;
		top: 0;
		z-index: 2;
		
		&.hide {
			background: inherit;
			.header-content .title {
				opacity: 0;
			}
		}
	}

	.nav-bar-content {
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 2;
	}

	.nav-header {
		width: 100%;
		position: absolute;
		z-index: 2;

		.header-content {
			position: relative;
			width: 100%;
			height: 100%;

			.header-but-area {
				&.left {
					left: 16upx;
				}

				&.right {
					right: 16upx;
				}

				position: absolute;
				top: 0;
				width: 124upx;
				bottom: 0;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.title {
				position: absolute;
				text-align: center;
				top: 0;
				bottom: 0;
				left: 32upx;
				right: 32upx;
				font-size: 32upx;
				font-weight: bold;
				color: #030303;
				opacity: 1;
				transition: opacity 0.5s;
				line-height: 1;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				text {
					flex: 1;
				}
			}
		}

	}
</style>
